<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
{% load staticfiles %}
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-商品详情</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
                {% if user.is_authenticated %}
				<div class="login_btn fl">
					欢迎您：<em>{{ user.username }}</em>
                    <span>|</span>
					<a href="{% url 'user:logout' %}">退出</a>
				</div>
                {% else %}
				<div class="login_btn fl">
					<a href="{% url 'user:login' %}">登录</a>
					<span>|</span>
					<a href="{% url 'user:register' %}">注册</a>
				</div>
                {% endif %}
				<div class="user_link fl">
					<span>|</span>
					<a href="{% url 'user:info' %}">用户中心</a>
					<span>|</span>
					<a href="{% url 'cart:show' %}">我的购物车</a>
					<span>|</span>
					<a href="{% url 'user:order' 1 %}">我的订单</a>
				</div>
			</div>
		</div>
	</div>


	<div class="search_bar clearfix">
		<a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="{% url 'cart:show' %}" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">{{ count }}</div>
		</div>
	</div>


	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav">
					{% for good_type in goods_type %}
                        <li><a href="{% url 'goods:list' good_type.id %}" class="{{ good_type.logo }}">{{ good_type.name }}</a></li>
                        {% comment %}
                        <li><a href="#model02" class="seafood">海鲜水产</a></li>
                        <li><a href="#model03" class="meet">猪牛羊肉</a></li>
                        <li><a href="#model04" class="egg">禽类蛋品</a></li>
                        <li><a href="#model05" class="vegetables">新鲜蔬菜</a></li>
                        <li><a href="#model06" class="ice">速冻食品</a></li>
                        {% endcomment %}
                    {% endfor %}
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img src="{{ goods.image.url }}"></div>

		<div class="goods_detail_list fr">
			<h3>{{ goods.name }}</h3>
			<p>{{ goods.desc }}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{ goods.price }}</em></span>
				<span class="show_unit">单  位：{{ goods.unite }}</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
                        {% csrf_token %}
                    <input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>
				</div>

			</div>
            <div class="goods_num clearfix">
                    {% for sku in skus %}
                        <a href="{% url 'goods:detail' sku.id %}">{{ sku.name }}</a>
                    {% endfor %}
            </div>
			<div class="total">总价：<em>16.80元</em></div>
			<div class="operate_btn">
				<a href="javascript:;" class="buy_btn">立即购买</a>
				<a href="javascript:;" goods_id="{{ goods.id }}" class="add_cart" id="add_cart">加入购物车</a>
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
                    {% for new in new_goods %}
					<li>
						<a href="{% url 'goods:detail' new.id %}"><img src="{{ new.image.url }}"></a>
						<h4><a href="{% url 'goods:detail' new.id %}">{{ new.name }}</a></h4>
						<div class="prize">￥{{ new.price }}</div>
					</li>
                    {% endfor %}

				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active">商品介绍</li>
				<li>评论</li>
			</ul>

			<div class="tab_content">
				<dl>
					<dt>商品详情：</dt>
					<dd>{{ goods.goods.detail|safe }} </dd>
				</dl>
			</div>

		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<div class="add_jump"></div>

	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript">
		{% comment %}
        $('#add_cart').click(function(){
			$(".add_jump").stop().animate({
				'left': $to_y+7,
				'top': $to_x+7},
				"fast", function() {
					$(".add_jump").fadeOut('fast',function(){
						$('#show_count').html(2);
					});

			});
		})
		{% endcomment %}

        $(function (){
            //更新页面显示
            function update_page(){
                count = $('.num_show').val();
                price = $('.show_pirze').children('em').html();
                res = parseFloat(price) * parseInt(count);
                $('.total').children('em').html(res);
            };

            update_page();
            // 获取件数
            var count = $('.num_show').val();

            // 增加件数
            $('.num_add').children('.add').click(function (){
                count = parseInt(count)+1;
                $('.num_show').val(count);
                update_page();
            });
            // 减少件数
            $('.num_add').children('.minus').click(function (){
                count = parseInt(count)-1;
                if (count < 0){
                    count = 1;
                }
                $('.num_show').val(count);
                update_page();
            });
            // 手动输入件数
            $('.num_show').blur(function (){
                count = $(this).prop('value');
                if(count<0){
                    count = 1;
                }
                $('.num_show').val(count);
                update_page();
            })

            // 处理添加数据操作
            $('.add_cart').click(function (){
                var csrf = $('input[name=csrfmiddlewaretoken]').val();
                var count = $('.num_show').val();
                var goods_id = $(this).attr('goods_id')
                console.log(csrf+':'+count+':'+goods_id);

                params = {'csrfmiddlewaretoken': csrf, 'goods_id': goods_id, 'count': count};
                $.ajax({
                    'url': '{% url 'cart:add' %}',
                    'type': 'post',
                    'data': params
                }).done(function (data){
                    console.log(data.msg);
                    if (data.msg == 'ok'){
                        alert('添加成功');
                        {#window.location.href = '{% url 'goods:index' %}';#}
                    }else if(data.msg == 'error_stock_not_enough'){
                        alert("商品库存不足");
                    }
                }).fail(function (){
                    console.log("网络超时");
                })
            })
        })


	</script>
	
</body>
</html>